<!DOCTYPE html>
<html th:replace="~{fragments/main :: layout(~{::title}, ~{::section}, ~{::popwin})}" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>客服管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>
<section>
    <a class="layui-btn" href="/kf/detail">创建账号</a>
    <table id="kf-table" lay-filter="test"></table>

    <script src="/layui/layui.js"></script>


    <script>
        layui.use(['layer', 'table'], function () {
            var table = layui.table;
            var $=layui.jquery;
            var cols = [ //表头
                {field: 'id', title: '编号'},
                {field: 'userName', title: '用户名'},
                {field: 'realName', title: '姓名'},
                {field: 'status', title: '状态', templet: '#statusTpl'},
                {field: 'createTime', title: '创建时间'},
                {title: '操作', toolbar: '#opTpl'}
            ];
            
            var resetPwd = function (obj) {
                var data = obj.data;
                var title = "确定重置密码（123$%^789）?";

                layer.confirm(title, {
                    icon: 3,
                    skin: 'layer-ext-moon',
                    btn: ['确认','返回']
                }, function(){
                    $.ajax({
                        url:'/kf/resetPwd',
                        type:'post',
                        data:JSON.stringify(data),
                        contentType: "application/json;charset=utf-8",
                        dataType:'json',
                        beforeSend:function () {
                            this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] });
                        },
                        success:function(data){
                            if(data.code == 500){
                                layer.msg(data.msg,{icon: 5});//失败的表情
                                return;
                            }else{
                                layer.msg(data.msg, {
                                    icon: 6,//成功的表情
                                    time: 1000 //1秒关闭（如果不配置，默认是3秒）
                                }, function(){
                                });
                            }
                        },
                        complete: function () {
                            layer.close(this.layerIndex);
                        },
                    });
                });
            }

            var resetStatus = function(obj){
                var data = obj.data;
                var title = "";
                if (data.status == 1){
                    data.status = 0;
                    title = "确定禁用该账号吗？";
                }else {
                    data.status = 1;
                    title = "确定启用该账号吗？";
                }
                layer.confirm(title, {
                    icon: 3,
                    skin: 'layer-ext-moon',
                    btn: ['确认','返回']
                }, function(){
                    $.ajax({
                        url:'/kf/update',
                        type:'post',
                        data:JSON.stringify(data),
                        contentType: "application/json;charset=utf-8",
                        dataType:'json',
                        beforeSend:function () {
                            this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] });
                        },
                        success:function(data){
                            if(data.code == 500){
                                layer.msg(data.msg,{icon: 5});//失败的表情
                                return;
                            }else{
                                layer.msg(data.msg, {
                                    icon: 6,//成功的表情
                                    time: 1000 //1秒关闭（如果不配置，默认是3秒）
                                }, function(){
                                    tableIns.reload({})
                                });
                            }
                        },
                        complete: function () {
                            layer.close(this.layerIndex);
                        },
                    });
                });
            };
            //执行渲染
            var tableIns = table.render( {
                elem: '#kf-table', //指定原始表格元素选择器（推荐id选择器）
                response: {
                    statusName: 'code' //规定数据状态的字段名称，默认：code
                    , statusCode: 200 //规定成功的状态码，默认：0
                    , msgName: 'message' //规定状态信息的字段名称，默认：msg
                    , dataName: 'data' //规定数据列表的字段名称，默认：data
                }
                , url: "/kf/list"
                , cols: [
                    cols
                ]
            } );
            table.on('tool(test)', function(obj){
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                if(layEvent == 'detail'){
                    window.location = "/kf/detail?userId=" + data.id;
                } else if(layEvent == 'enableUser'){
                    resetStatus(obj);
                } else if(layEvent == 'disableUser'){
                    resetStatus(obj);
                } else if(layEvent == 'resetPwd'){
                    resetPwd(obj);
                }
            })
        });

    </script>
    <script type="text/html" id="statusTpl">
        {{#  if(d.status == 1){ }}
        启用
        {{#  } else { }}
        禁用
        {{#  } }}
    </script>
    <script type="text/html" id="opTpl">
        <div class="layui-btn-container">
            <a class="layui-btn layui-btn-sm" lay-event="detail">详细</a>
            <a class="layui-btn layui-btn-sm" lay-event="resetPwd">重置密码</a>

            {{#  if(d.status == 1){ }}
            <a class="layui-btn layui-btn-sm" lay-event="disableUser">禁用</a>
            {{#  } else { }}
            <a class="layui-btn layui-btn-sm" lay-event="enableUser">启用</a>
            {{#  } }}
        </div>
    </script>
</section>
<div th:fragment="popwin"></div>
</body>
</html>